<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" th:href="@{/css/index.css}">
    <style>
        #captchaImg {
            cursor: pointer;
        }

        .error{
            font-size: 14px;
            color: red;
        }
    </style>
</head>
<body>
<div class="login-container">
    <h2>用户登录</h2>
    <form action="javascript:void(0)" method="post" name="myForm">
        <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" placeholder="用户名是5~20为字母数字组合" required autofocus title="用户名是5~20为字母数字组合">
            <p class="error"></p>
        </div>
        <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required maxlength="20" minlength="6">
            <p class="error"></p>
        </div>
        <div class="form-group captcha">
            <label for="captcha">验证码:</label>
            <input type="text" id="captcha" name="captcha" required minlength="4" maxlength="4">
            <img th:src="@{captcha}" id="captchaImg" alt="验证码" title="点击刷新验证码">
            <p class="error"></p>
        </div>
        <div class="form-group">
            <p class="error" id="message"></p>
            <br/>
            <input type="button" id="submitBtn" value="登录">
        </div>
    </form>

    <script th:src="@{/js/axios.min.js}"></script>
    <script type="text/javascript" th:inline="javascript">
        // thymeleaf 获取当前项目路径
        /*<![CDATA[*/
        const ctx = /*[[@{/}]]*/;
        /*]]>*/
        // 当前窗口 不是最外层窗口
        if (window != window.top){
            // 父窗口 window.parent，最外层窗口 window.top
            window.top.location.href = ctx;
        }
    </script>

    <script th:src="@{/layui/layui.js}"></script>

    <script th:src="@{/js/service/login.js}"></script>

</div>
</body>
</html>
